<template>
  <div>
    <el-row class="app-toptool" type="flex">
      <el-col :span="18">

      </el-col>
      <el-col :span="6">
        <div class="btn-group" style="margin-bottom:11px;float: right;">
          <div>
            <el-button
              v-if="checkPermission('/goods/add')"
              type="primary"
              size="mini"
              icon="el-icon-plus"
              @click="add()"
            >添加</el-button>            
          </div>
        </div>
      </el-col>
    </el-row>
    
    <el-table
      class="table_tree"
      :data="items"
      row-key="id"      
      default-expand-all
      :tree-props="{children: 'children' }"      
      width="100%" >
      <el-table-column label="名称" >
        <template slot-scope="scope">{{ scope.row.title }} </template>
      </el-table-column>

      <el-table-column label="积分类型" width="200">               
        <template slot-scope="scope">{{ scope.row.integral_type_value }} </template>      
      </el-table-column>
      
      <el-table-column label="积分额度" width="120">
        <template slot-scope="scope" >{{ scope.row.integral }} </template>
      </el-table-column>

      <el-table-column label="金额类型" width="120">
        <template slot-scope="scope">{{ scope.row.money_type_value }} </template>
      </el-table-column>

      <el-table-column label="金额额度" width="120">
        <template slot-scope="scope">{{ scope.row.money }} </template>
      </el-table-column>

      <el-table-column width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>

          <el-button
            size="mini"
            type="primary"
            @click="handleList(scope.$index, scope.row)"
          >列表</el-button>

          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="列表" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="date" label="日期" width="150"></el-table-column>
        <el-table-column property="name" label="姓名" width="200"></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>

      <el-pagination
        background
        :page-size="10"
        :pager-count="5"
        layout="pager"
        :total="0">
      </el-pagination>
    </el-dialog>

    <el-dialog :title="dialog_title" :visible.sync="dialogVisible" width="800px">
      <el-form ref="open_form" v-model="open_form" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="open_form.title" />
        </el-form-item>
        <el-form-item label="上级">
          <el-select
            ref="selectRef"
            v-model="open_form.currentLabel"
            clearable
            @visible-change="handleVisibleChange"
          >
            <el-option
              v-loading="loading"
              style="height: 100%; padding: 0"
              value=""
              element-loading-text="加载中..."
              element-loading-spinner="el-icon-loading"
            >
              <el-tree
                ref="treeRef"
                :data="dataOfTree"
                :props="defaultProps"
                :filter-node-method="filterNode"
                :current-node-key="selectedNode.value"
                @node-click="handleNodeClicked"
              />
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="积分类型" v-model="open_form.integral_type" >
            <el-radio v-model="open_form.integral_type" :label="1" >百分比</el-radio>
            <el-radio v-model="open_form.integral_type" :label="2" >固定额度</el-radio>
        </el-form-item>

        <el-form-item label="积分额度">
          <el-input v-model="open_form.integral" placeholder="请输入积分额度"></el-input>
        </el-form-item>

        <el-form-item label="金额类型">
            <el-radio v-model="open_form.money_type" :label="1">百分比</el-radio>
            <el-radio v-model="open_form.money_type" :label="2">固定额度</el-radio>
        </el-form-item>

        <el-form-item label="金额额度">
          <el-input v-model="open_form.money" placeholder="请输入金额额度"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="onClose">取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'title',
        value: 'id'
      },
      is_show: 1,
      items: [],
      dialogVisible: false,
      open_form: [],
      dialog_title: '',

      // currentValue: undefined,
      // // currentLabel: undefined,
      dataOfTree: [],
      selectedNode: {},
      loading: false,
      dataSource: {},
      multiple: true,
      dialogTableVisible: false,
      gridData: []
    }
  },

  mounted() {
    this.show()
  }, 
  methods: {
    handleList(){
      this.dialogTableVisible = true
    },    
    handleNodeClicked(data, node, comp) {
       console.log(data, node, comp, 'handleNodeClicked');
      this.selectedNode = data
      this.open_form.currentLabel = data[this.defaultProps.label]
      this.open_form.currentValue = data[this.defaultProps.value]
      const result = this.buildResultByNodeData(data)
      this.$emit('myInputEvent', result)
      this.$emit('onNodeSelectEvent', result)
      this.closeSelect()
    },
    closeSelect() {
      this.$refs.selectRef.blur()
    },
    buildResultByNodeData(data) {
      return {
        node: data[this.defaultProps.value],
        data: {
          label: data[this.defaultProps.label],
          value: data[this.defaultProps.value]
        },
        meta: data
      }
    },
    handleVisibleChange(visible) {
      console.log(visible, '=handleVisibleChange')
    },
    filterNode(value, data) {
      console.log(value, data, 'fileterNode')
    },
    onSubmit() {      
      this.open_form.pid = this.open_form.currentValue
      console.log(this.open_form, '=open_form')
      this.$api.post('/retail/update', this.open_form).then(res => {
        if (res.code == 2000) {
          this.$message({
            type: 'success',
            showClose: true,
            message: res.msg
          })
          this.dialogVisible = false
          this.show()
        }
      })
    },
    onClose() {
      this.dialogVisible = false
    },
    show() {
      this.$api.post('/retail/index').then(res => {
        if (res.code == 2000) {
          this.items = res.data.item
        }
      })
    },

    add(){
      this.dialog_title = '新增'
      this.dialogVisible = true
      this.dataOfTree = [{ 'title': '顶级', 'pid': 0, 'id': 0 }]
      this.dataOfTree = this.dataOfTree.concat(this.items)
      this.open_form = {
        id: 0,
        integral_type: 1,
        money_type: 1
      };
    },



    handleEdit(e, row) {
      this.dialog_title = '编辑'
      this.open_form = []
      this.dataOfTree = [{ 'title': '顶级', 'pid': 0, 'id': 0 }]
      this.dialogVisible = true
      this.$api.post('/retail/detail', { id: row.id }).then(res => {
        if (res.code == 2000) {
          this.open_form = res.data.item
          if (res.data.item.pid == 0) {
            this.open_form.currentLabel = '顶级'
            this.open_form.currentValue = 0
          } else {
            this.open_form.currentLabel = res.data.item.pid_title
            this.open_form.currentValue = res.data.item.pid
          }
          this.dataOfTree = this.dataOfTree.concat(this.items)
        }
      })
    },

    handleDelete(e, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.post('/retail/delete', { id: row.id }).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
                this.show()
                
            })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      


      


    }

  }
}
</script>

<style scoped>
.table_tree{margin:10px}
</style>
